<template>
    <div class="product-contanier">
        <div class="header">
            <div class="title">
                <div class="iconfont" @click="$router.go(-1)">&#xe603;</div>
                <span>搜索结果</span>
            </div>
            <div class="right">
                <van-search
                    v-model="pages.value"
                    show-action
                    placeholder="请输入搜索关键词"
                    background="#43B985"
                    style="padding:7px;"
                    @search="onSearch"
                    >
                    <template #action>
                        <div @click="onSearch">搜索</div>
                    </template>
                </van-search>
            </div>
        </div>
        <div class="select">
            <van-tabs @click="onClick">
                <van-tab title="找猪">
                    <van-card v-for="it in list" :key="it.id" @click="toDetail(it.id)"
                        :desc="it.pdesc"
                        :title="it.title"
                        thumb="https://cbu01.alicdn.com/img/ibank/2019/125/811/10672118521_1423060058.220x220.jpg"
                        >
                        <template #tags>
                            <van-tag plain type="danger" v-for="item in it.tag" :key="item">{{item}}</van-tag>
                        </template>
                        <template #footer>
                            <van-button v-if="it.collected" @click.stop="collectedChange(it.id)" size="mini" type="danger">收藏</van-button>
                            <van-button v-if="!it.collected" @click.stop="collectedChange(it.id)" size="mini">收藏</van-button>
                        </template>
                    </van-card>
                </van-tab>
                <van-tab title="找人">
                    <van-card
                        desc="描述信息"
                        title="商家名称"
                        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
                        <template #tags>
                            <van-tag plain type="danger">标签</van-tag>
                            <van-tag plain type="danger">标签</van-tag>
                        </template>
                        <template #footer>
                            <van-button v-if="followed" @click.stop="followedChange" size="mini" type="danger">关注</van-button>
                            <van-button v-if="!followed" @click.stop="followedChange" size="mini">关注</van-button>
                        </template>
                        </van-card>
                </van-tab>
            </van-tabs>
            <!-- <span class="active">找猪</span>
            <span>找人</span> -->
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active: 0,
                checked: true,
                collected: false,
                followed: false,
                activeIcon: 'https://img01.yzcdn.cn/vant/star.png',
                inactiveIcon: 'https://img01.yzcdn.cn/vant/star-o.png',
                pages: {
                    value: this.$route.query.value,
                    queryType: 0, //0表示找商品，1表示找用户
                },
                list: [
                    {id: '0024', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false},
                    {id: '006', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false},
                    {id: '0042', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false},
                    {id: '002', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false},
                    {id: '003', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false},
                    {id: '001', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false}
                ]
            }
        },
        created() {
            //获取搜索结果
            this.onSearch()
        },
        methods: {
            //搜索
            async onSearch(val) {
                //发送搜索请求
                // let result = await 
            },
            //切换找商品还是用户
            onClick(name, title) {
                console.log(arguments,'----qiehuan')
                if(name == 1){
                    this.pages.queryType = 1
                }else{
                    this.pages.queryType = 0
                }
            },
            //收藏商品
            collectedChange(id) {
                console.log('收藏商品')
                console.log(arguments)
                this.list.map(it => {
                    if(it.id === id){
                        it.collected = !it.collected
                    }
                })
                //发送收藏请求
            },
            //关注用户
            followedChange(id) {
                this.followed = !this.followed
                console.log(id)
                //发送关注请求
            },
            //进入详情页
            toDetail(id){
                this.$router.push({path:'/product/detail', query:{id}})
            }
        },
    }
</script>

<style lang="less" scoped>
    @import "../../style/common.less";
    .product-contanier {
        width: 100%;
        height: 100%;
        .header {
            width: 100%;
            height: 88px;
            background-color: @c43;
            font-size: .75rem;
            font-weight: 500;
            text-align: center;
            padding: 0 12px;
            .iconfont{
                line-height: 40px;
                font-size: .9rem;
                position: absolute;
                left: 0;
            }
            .title{
                display: block;
                position: relative;
                // left: 0;
                // top: 0;
                line-height: 40px;
                height: 40px;
                margin: auto;
                text-align: center;
            }
        }
        .select {
            font-size: .7rem;
            height: calc(100% - 88px);
            overflow: auto;
            .img-icon {
                height: 20px;
            }
        }
        .van-card:not(:first-child){
            margin-top: 0;
            border-top: 1px dashed @cdd;
        }
    }
</style>